<template>
  <div id="dashIndex">
    <div id="dheader">
      <el-row>
        <el-col :span="1" class="icon-box">
          <img @click="changeRputer('/')" src="../../assets/img/home/logo.png"
               :style="{'cursor':'pointer','height':'100%'}"/>
        </el-col>
        <el-col :span="3" class="title-box" style="cursor: pointer;">
          <p :style="{'margin-left':'10px'}">后台管理系统</p>
        </el-col>
        <el-col :span="6" :offset="14" :style="{'height':'100%'}">
          <ul>
            <li class="nav" @click="changeRputer('/')">前台首页</li>
            <li class="nav">
              <el-dropdown>
                <el-button type="text" :style="{'color': 'white','text-decoration':'underline'}">
                  {{ userName }}
                  <i class="el-icon-caret-bottom el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown" :style="{'background-color': 'white'}">
                  <el-dropdown-item>
                    <p @click="toOther('index/persondata')">账号设置</p>
                  </el-dropdown-item>
                  <el-dropdown-item><span @click="userLogout()">退出账号</span></el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
          </ul>
        </el-col>
      </el-row>
    </div>
    <div class="view">
      <el-row>
        <el-col :span="4">
          <MenuBar :systemName="system"></MenuBar>
        </el-col>
        <el-col :span="20">
          <router-view></router-view>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { optionCookie } from '../../assets/js/cookie.js'
  import { resolution } from '../../assets/resolution.js'
  import MenuBar from './MenuBar'

  export default {
    name: 'dashIndex',
    data () {
      return {
        system: 'talentcenter',
        userName: '',
      }
    },
    beforeCreate () {
      let _this = this
      let pramas = new Object()
      postDataToServer('ACCOUT_ROLES').then((data) => {
        if (data.status === 0) {
          this.$store.state.userEntry = true
          data.data_list.forEach((e) => {
            switch (e.subsys_name) {
              case '人才中心':
                this.$store.state.talentCenter = e.role_name
                break
              case '人才服务':
                this.$store.state.talentservice = e.role_name
                break
              case '人才交流':
                this.$store.state.talentExchange = e.role_name
                break
              case '新闻系统':
                this.$store.state.newSys = e.role_name
                break
              case '项目申报':
                this.$store.state.porjectApp = e.role_name
                break
              case '系统设置':
                this.$store.state.sysSet = e.role_name
            }
          })
        } else {
          this.$store.state.userEntry = false
        }
      })
    },
    created () {
      this.getResolution()
      this.createComponent()
    },
    methods: {
      getResolution () {
        var key = screen.width + '*' + screen.height
        var s = resolution(key)
        if (screen.width < 1024) {
          this.$confirm('您的分辨率过低，无法正常显示客户端，是否跳转到移动端?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {

          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
        }
        this.$store.state.Resolution = s
      },
      createComponent () {
        // this.system = this.$route.params.system;
        this.getUseInfo()
      },
      getUseInfo () {
        let _this = this
        postDataToServer('ACCOUT_BASEINFO').then((data) => {
          if (data.status === 0) {
            _this.$store.state.userID = data
            if (data.type === '0') {
              _this.userName = data.personalinfo.real_name
              _this.$store.state.personalID = data.personalinfo.id
            } else if (data.type === '1') {
              _this.userName = data.companyinfo.company_name
              _this.$store.state.companyID = data.companyinfo.id
            } else {
              _this.userName = '新用户'
            }
          } else {
            this.$router.push({'path': '/'})
          }
        })
      },
      changeRputer (url) {
        this.$router.push({'path': url})
      },
      userLogout () {
        let _this = this
        postDataToServer('USER_LOGOUT').then((data) => {
          if (data.status === 0) {
            let cookie = new Object()
            cookie.name = 'access_token'
            optionCookie('del', cookie)
            _this.$router.go(0)
            this.$router.push({'path': '/'})
          }
        })
      },
      toOther (path) {
        this.$router.push({'path': `/${path}`})
      }
    },
    components: {
      MenuBar
    },
    watch: {
      '$route': function (val, oldval) {
        this.createComponent()
      }
    }
  }
</script>

<style scoped>
  #dheader {
    height: 40px;
    padding: 5px 0 5px 2em;
    background: #105AB9;
  }

  #dheader > * {
    height: 100%;
  }

  .icon-box {
    height: 100%;
    padding: 2px 0;

  }

  .title-box {
    height: 40px;
    line-height: 40px;
    color: white;
  }

  ul {
    list-style: none;
    background-color: #58B7FF;
    line-height: 40px
  }

  ul .nav {
    float: left;
    text-align: center;
    color: white;
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    margin-right: 10px;
  }
</style>
